<template>
  <div>
    <div class="pt-4">
      <div class="block-title">基本信息</div>
      <el-form ref="basicFormRef" :model="basicForm" size="small" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="载荷类型" prop="loadName">
              <span>{{ basicForm.loadName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="载荷分类" prop="loadType">
              <span>{{ basicForm.loadType }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="阶段" prop="stage">
              <span>{{ basicForm.stage }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本号" prop="version">
              <span>{{ basicForm.version }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="创建人" prop="stage">
              <span>{{ basicForm.createBy }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="version">
              <span>{{ basicForm.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="block-title">参数信息</div>
    </div>
    <div>
      <div class="required-title">公共参数</div>
      <div class="block-element">
        <div class="card-title">累计站位：</div>
        <div class="block-btn">
          <span>{{ paramsForm.cumulative_station_5_0 }}</span>
        </div>
      </div>
      <div class="block-element2">
        <div class="card-title">刚轴信息：</div>
        <div class="card-content">
          <div class="flex flex-items-center pt3">
            <div class="card-label">垂尾刚轴原点：</div>
            <div class="w-65">{{ paramsForm.origin_location_cw }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">垂尾转换矩阵：</div>
            <div class="w-65">{{ paramsForm.reverse_array_cw }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左平尾刚轴原点：</div>
            <div class="w-65">{{ paramsForm.origin_location_pwl }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左平尾转换矩阵：</div>
            <div class="w-65">{{ paramsForm.reverse_array_pwl }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右平尾刚轴原点：</div>
            <div class="w-65">{{ paramsForm.origin_location_pwr }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右平尾转换矩阵：</div>
            <div class="w-65">{{ paramsForm.reverse_array_pwr }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左机翼内刚轴原点：</div>
            <div class="w-65">{{ paramsForm.origin_location_inner_jyl }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左机翼内转换矩阵：</div>
            <div class="w-65">{{ paramsForm.reverse_array_inner_jyl }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左机翼外刚轴原点：</div>
            <div class="w-65">{{ paramsForm.origin_location_outer_jyl }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左机翼外转换矩阵：</div>
            <div class="w-65">{{ paramsForm.reverse_array_outer_jyl }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右机翼内刚轴原点：</div>
            <div class="w-65">{{ paramsForm.origin_location_inner_jyr }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右机翼内转换矩阵：</div>
            <div class="w-65">{{ paramsForm.reverse_array_inner_jyr }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右机翼外刚轴原点：</div>
            <div class="w-65">{{ paramsForm.origin_location_outer_jyr }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右机翼外转换矩阵：</div>
            <div class="w-65">{{ paramsForm.reverse_array_outer_jyr }}</div>
          </div>
        </div>
      </div>
      <div class="block-element2">
        <div class="card-title">集中点分载：</div>

        <div class="card-content">
          <div class="flex flex-items-center pt3">
            <div class="card-label">K值：</div>
            <div class="w-100">{{ paramsForm.k }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起坐标1：</div>
            <div class="w-65">{{ paramsForm.location_qj_1 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起节点1：</div>
            <div class="w-65">{{ paramsForm.node_mark_qj_1 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起坐标2：</div>
            <div class="w-65">{{ paramsForm.location_qj_2 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起节点2：</div>
            <div class="w-65">{{ paramsForm.node_mark_qj_2 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起坐标3：</div>
            <div class="w-65">{{ paramsForm.location_qj_3 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起节点3：</div>
            <div class="w-65">{{ paramsForm.node_mark_qj_3 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起坐标4：</div>
            <div class="w-65">{{ paramsForm.location_qj_4 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">前起节点4：</div>
            <div class="w-65">{{ paramsForm.node_mark_qj_4 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左短舱坐标：</div>
            <div class="w-65">{{ paramsForm.culm_list_1 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左短舱节点：</div>
            <div class="w-65">{{ paramsForm.node_mark1 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右短舱坐标：</div>
            <div class="w-65">{{ paramsForm.culm_list_2 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右短舱节点：</div>
            <div class="w-65">{{ paramsForm.node_mark2 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左主起坐标：</div>
            <div class="w-65">{{ paramsForm.culm_list_3 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">左主起节点：</div>
            <div class="w-65">{{ paramsForm.node_mark_3 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右主起坐标：</div>
            <div class="w-65">{{ paramsForm.culm_list_4 }}</div>
          </div>
          <div class="flex flex-items-center pt3">
            <div class="card-label">右主起节点：</div>
            <div class="w-65">{{ paramsForm.node_mark_4 }}</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="required-title mt-2">特有参数</div>
      <div class="block-element3">
        <div class="flex flex-items-center">
          <div class="card-title">辅助拆分表格：</div>
          <div class="block-btn">
            <span>{{ specificParamForm.split_excle_file_2_0 }}</span>
          </div>
        </div>
        <div class="flex flex-items-center">
          <div class="card-title">平尾接入点：</div>
          <div class="block-btn">{{ specificParamForm.xunidian1 }}</div>
        </div>
        <div class="flex flex-items-center">
          <div class="card-title">垂尾接入点：</div>
          <div class="block-btn">{{ specificParamForm.xunidian2 }}</div>
        </div>
      </div>
    </div>
    <div>
      <div class="block-title mt-2">数据信息</div>
      <div class="block-element3">
        <div class="flex flex-items-center">
          <div class="card-title">原始载荷：</div>
          <div class="block-btn">
            <span>{{ experimentForm.originalFileName }}</span>
          </div>
        </div>
        <div class="flex flex-items-center">
          <div class="card-title">节点信息：</div>
          <div class="block-btn">
            <span>{{ experimentForm.nodeInformationFileName }}</span>
          </div>
        </div>
        <div class="flex flex-items-center">
          <div class="card-title">节点载荷编号：</div>
          <div class="block-btn">
            <span>{{ experimentForm.nodeLoadNumberFileName }}</span>
          </div>
        </div>
        <div class="flex flex-items-center">
          <div class="card-title">升降舵铰链坐标系信息：</div>
          <div class="block-btn">
            <span>{{ experimentForm.elevatorHingeCoordinateSystemInformation }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="versionDetailForm" lang="ts">
import { getExperimentDetail } from '@/api/loadProcessingAlgorithm/loadTaskManagement/index';
import { getVersionDetail, publicParameterList, specificParameterList } from '@/api/loadProcessingAlgorithm/loadVersionManagement/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dataId } = defineProps({
  dataId: String,
});
const basicFormRef = ref<ElFormInstance>();
const basicForm = reactive({
  id: '',
  loadType: '',
  loadName: '',
  stage: '',
  version: '',
  createBy: '',
  createTime: ''
});
const experimentForm = reactive({
  id: '',
  loadType: '',
  stage: '',
  version: '',
  originalFileName: '',
  nodeLoadNumberFileName: '',
  nodeInformationFileName: '',
  loadcaseVersionId: '',
  elevatorHingeCoordinateSystemInformation: ''
});
const paramsForm = reactive({
  cumulative_station_5_0: '', // 累积站位
  origin_location_cw: '', // 垂尾刚轴原点
  reverse_array_cw: '', //垂尾转换矩阵
  origin_location_pwl: '', //左平尾刚轴原点
  reverse_array_pwl: '', //	左平尾转换矩阵
  origin_location_pwr: '', //	右平尾刚轴原点
  reverse_array_pwr: '', //	右平尾转换矩阵
  origin_location_inner_jyl: '', //	左机翼内刚轴原点
  reverse_array_inner_jyl: '', //	左机翼内转换矩阵
  origin_location_outer_jyl: '', //	左机翼外刚轴原点
  reverse_array_outer_jyl: '', //	左机翼外转换矩阵
  origin_location_inner_jyr: '', //	右机翼内刚轴原点
  reverse_array_inner_jyr: '', //	右机翼内转换矩阵
  origin_location_outer_jyr: '', //	右机翼外刚轴原点
  reverse_array_outer_jyr: '', //	右机翼外转换矩阵
  k: '', //	k值
  location_qj_1: '', //	前起坐标1
  node_mark_qj_1: '', //	前起节点1
  location_qj_2: '', //	前起坐标2
  node_mark_qj_2: '', //	前起节点2
  location_qj_3: '', //	前起坐标3
  node_mark_qj_3: '', //	前起节点3
  location_qj_4: '', //	前起坐标4
  node_mark_qj_4: '', //	前起节点4
  culm_list_1: '', //	左短舱坐标
  node_mark1: '', //	左短舱节点
  culm_list_2: '', //	右短舱坐标
  node_mark2: '', //	右短舱节点
  culm_list_3: '', //	左主起坐标
  node_mark_3: '', //	左主起节点
  culm_list_4: '', //	右主起坐标
  node_mark_4: '' //	右主起节点
});
const specificParamForm = reactive({
  split_excle_file_2_0: '', //	辅助拆分表格
  xunidian1: '', //	平尾接入点
  xunidian2: '' //	垂尾接入点
});
const paramIdForm = reactive({});
const specificParamIdForm = reactive({});
const getPublicParameters = async () => {
  const obj = {
    loadType: basicForm.loadType,
    stage: basicForm.stage,
    version: basicForm.version,
    pageNum: 1,
    pageSize: 99
  };
  const { rows } = await publicParameterList(obj);
  rows.forEach((item) => {
    paramsForm[item.parameterName] = item.value;
    paramIdForm[item.parameterName] = item.id;
  });
};
const getSpecificParameters = async (versionId) => {
  const obj = {
    loadcaseVersionId: versionId,
    pageNum: 1,
    pageSize: 99
  };
  const { rows } = await specificParameterList(obj);
  rows.forEach((item) => {
    specificParamForm[item.parameterName] = item.value;
    specificParamIdForm[item.parameterName] = item.id;
  });
};
const initData = async () => {
  // 基础信息
  const { data } = await getExperimentDetail(dataId);
  for (const key in experimentForm) {
    experimentForm[key] = data[key];
  }
  const res = await getVersionDetail(experimentForm.loadcaseVersionId);
  for (const key in basicForm) {
    basicForm[key] = res.data[key];
  }
  // 公共参数
  await getSpecificParameters(experimentForm.loadcaseVersionId);
  await getPublicParameters();
};
onMounted(() => {
  initData();
});
</script>
<style lang="scss" scoped>
.block-title {
  color: #1890ff;
  font-size: 14px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.block-title::before {
  content: '';
  width: 3px;
  height: 15px;
  background-color: #48a1f5;
  margin-right: 8px;
}
.required-title {
  color: #606266;
  padding-bottom: 12px;
  font-weight: 700;
  font-size: 12px;
}
.block-element {
  border: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
}
.block-element2 {
  border: 1px solid #e4e4e4;
  display: flex;
  padding-bottom: 12px;
  margin-top: 8px;
}
.block-element3 {
  border: 1px solid #e4e4e4;
}
.card-title {
  width: 140px;
  text-align: right;
  padding: 12px 0;
  font-size: 12px;
}
.card-content {
  width: calc(100% - 100px);
  display: flex;
  flex-wrap: wrap;
}
.card-label {
  width: 130px;
  font-size: 12px;
  text-align: right;
}
.block-btn {
  font-size: 12px;
  width: 820px;
  text-align: left;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示超出的文本 */
}
</style>
